<template>
  <div class="detail">
    <div v-if="loading">
      <div class="goods_photo" id="detail_0">
        <van-swipe @change="onChange">
          <van-swipe-item
            v-for="(item, index) in detailData.gallery_list"
            :key="index"
          >
            <img :src="item.img_url" alt="" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              <b>{{ current + 1 }}</b
              >/{{
                detailData &&
                detailData.gallery_list &&
                detailData.gallery_list.length
              }}
            </div>
          </template>
        </van-swipe>
      </div>
      <div class="goods_price">
        <div class="price_info">
          <div class="price">￥{{ detailData.shop_price }}</div>
          <div class="discounts">
            <s>￥{{ detailData.marketPrice }}</s>
          </div>
          <div class="sales">已售{{ detailData.sales_volume }}件</div>
        </div>
        <div class="goods_share" @click="shareShowFun">
          <i class="iconfont icon-fenxiang1"></i>
          <p>分享</p>
        </div>
      </div>
      <div class="goods_title">
        {{ detailData.goods_name }}
      </div>
      <div class="goods_module mt08">
        <div class="activity_content">
          <div class="activity_item">
            <div class="title">优惠</div>
            <div class="activity_main">
              <div>可参加以下优惠活动</div>
              <div>满减：全场通用</div>
            </div>
            <div class="activity_ico">
              <i class="iconfont icon-fenlei1"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="goods_module mt08">
        <div class="activity_content">
          <div class="activity_item" @click="showCart">
            <div class="title">已选</div>
            <div class="activity_main">
              <div>{{ num }}个</div>
            </div>
            <div class="activity_ico">
              <i class="iconfont icon-fenlei1"></i>
            </div>
          </div>
          <div class="activity_item" @click="addressChange">
            <div class="title">送至</div>
            <div class="activity_main">
              <div>
                {{ address[0].name }}&nbsp;&nbsp;&nbsp;{{
                  address[1].name
                }}&nbsp;&nbsp;{{ address[2].name }}
              </div>
            </div>
            <!-- <user-address/> -->
            <div class="activity_ico">
              <i class="iconfont icon-fenlei1"></i>
            </div>
          </div>
          <div class="activity_item">
            <div class="title">运费</div>
            <div class="activity_main">
              <div>￥15.00</div>
            </div>
            <div class="activity_ico">
              <i class="iconfont icon-fenlei1"></i>
            </div>
          </div>
          <div class="activity_item">
            <div class="title">服务</div>
            <div class="activity_main">
              <div>闪速配送 正品保证</div>
              <div>不支持7天无理由退货</div>
            </div>
            <div class="activity_ico">
              <i class="iconfont icon-fenlei1"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="goods_module mt08" id="detail_1">
        <div class="title_box">
          <div class="title_text">
            <span>
              <i></i>
              评论
            </span>
            <span> 4条 </span>
          </div>
          <div>
            <span>
              好评度100%
              <i class="iconfont icon-xiaojiantou"></i>
            </span>
          </div>
        </div>
        <div class="comitem">
          <div class="item_header">
            <img
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM5icnWI7Qia8u1mdy51vLkBkg0ajmzgSgE9yAJMwbQ6KT1jmoFx1ibmv6N7mbt7AtCB6icNJiaf65HXLQA/132"
              alt=""
            />
            <div class="right">
              <div class="com_name">东方神蛙</div>
              <div class="com_time">
                <div class="rate">
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                </div>
                <div class="time">2021-02-22 14:36:11</div>
              </div>
            </div>
          </div>
          <div class="item_body">真不戳！！！！！！</div>
        </div>
        <div class="comitem">
          <div class="item_header">
            <img
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM5icnWI7Qia8u1mdy51vLkBkg0ajmzgSgE9yAJMwbQ6KT1jmoFx1ibmv6N7mbt7AtCB6icNJiaf65HXLQA/132"
              alt=""
            />
            <div class="right">
              <div class="com_name">东方神蛙</div>
              <div class="com_time">
                <div class="rate">
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                </div>
                <div class="time">2021-02-22 14:36:11</div>
              </div>
            </div>
          </div>
          <div class="item_body">真不戳！！！！！！</div>
        </div>
        <div class="comitem">
          <div class="item_header">
            <img
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM5icnWI7Qia8u1mdy51vLkBkg0ajmzgSgE9yAJMwbQ6KT1jmoFx1ibmv6N7mbt7AtCB6icNJiaf65HXLQA/132"
              alt=""
            />
            <div class="right">
              <div class="com_name">东方神蛙</div>
              <div class="com_time">
                <div class="rate">
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                </div>
                <div class="time">2021-02-22 14:36:11</div>
              </div>
            </div>
          </div>
          <div class="item_body">真不戳！！！！！！</div>
        </div>
        <div class="comitem">
          <div class="item_header">
            <img
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM5icnWI7Qia8u1mdy51vLkBkg0ajmzgSgE9yAJMwbQ6KT1jmoFx1ibmv6N7mbt7AtCB6icNJiaf65HXLQA/132"
              alt=""
            />
            <div class="right">
              <div class="com_name">东方神蛙</div>
              <div class="com_time">
                <div class="rate">
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                  <i class="iconfont icon-shoucang"></i>
                </div>
                <div class="time">2021-02-22 14:36:11</div>
              </div>
            </div>
          </div>
          <div class="item_body">真不戳！！！！！！</div>
        </div>
      </div>
      <div class="goods_module mt08" id="detail_2">
        <div class="title_box">
          <div class="title_text">
            <span>
              <i></i>
              详情
            </span>
          </div>
        </div>
        <div class="image_text">
          <img
            src=""
            alt=""
          />
          图文介绍
        </div>
        <div class="detail-img">
          <img
            width="100%"
            src="https://img30.360buyimg.com/popWareDetail/jfs/t1/117472/2/13338/203695/5f1f8c01E2ffe75dc/780211ac4ca49001.gif"
            alt=""
          />
          <img
            width="100%"
            src="https://img10.360buyimg.com/imgzone/jfs/t1/145184/33/3627/217590/5f19a954E320f2740/574b8aee9bde3ac9.jpg"
            alt=""
          />
          <img
            width="100%"
            src="https://img10.360buyimg.com/imgzone/jfs/t1/145184/33/3627/217590/5f19a954E320f2740/574b8aee9bde3ac9.jpg"
            alt=""
          />
          <img
            width="100%"
            src="https://img30.360buyimg.com/popWaterMark/jfs/t1/25752/19/14919/234018/5caaef3eE0542c101/18f70c5c200b9923.jpg"
            alt=""
          />
        </div>
      </div>
      <div class="goods_recommend" id="detail_3">
        <div class="goods_tit">
          <span>同款推荐</span>
          <i></i>
        </div>
        <div class="goods_cont">
          <good-list :list="homeData" />
        </div>
      </div>

      <!-- 购物车弹出框 -->
      <div class="cart-up">
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
          <div class="cart-top">
            <div class="top-left">
              <img :src="detailData.goods_thumb" alt="" />
            </div>
            <div class="top-right">
              <h3
                style="
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                "
              >
                {{ detailData.goods_name }}
              </h3>
              <p class="price">￥{{ detailData.shop_price }}</p>
              <p class="info">库存：1000 编号：bt88411235</p>
            </div>
          </div>
          <div class="cart-num">
            <div>数量</div>
            <div>
              <!-- <span @click="num > 1 ? num-- : (num = 1)">-</span> -->
              <span @click="num > 1 ? num-- : (num = 1)">-</span>
              <input type="text" v-model="num" />
              <span @click="num++">+</span>
            </div>
          </div>
          <div class="cart-btn">
            <div @click="addShop">加入购物车</div>
            <div @click="goCart">立即购买</div>
          </div>
        </van-popup>
      </div>

      <!-- 三级联动 -->
      <div class="address">
        <van-popup
          v-model="addressShow"
          position="bottom"
          :style="{ height: '60%' }"
        >
          <van-area
            title="标题"
            :area-list="areaList"
            :columns-placeholder="['请选择', '请选择', '请选择']"
            @confirm="yesAddress"
          />
        </van-popup>
      </div>

      <!-- 分享弹窗 -->
      <div class="share">
        <van-popup
          v-model="shareShow"
          position="bottom"
          :style="{ height: '4rem' }"
        >
          <div @click="showChange(1)">发送给好友</div>
          <div @click="showChange(2)">生成海报</div>
        </van-popup>
      </div>

      <send-firend v-if="firend" @closeMod1="close(1)" />
      <create-hai
        @closeLoad="closeLoad"
        :goodInfo="goodInfo"
        v-if="create"
        @closeMod2="close(2)"
      />
      <!-- 加载动画 -->
    </div>
    <div v-else class="loading">
      <img src="@/assets/loading.gif" alt="" />
    </div>
  </div>
</template>

<script>
import bus from "@/event";
import goodList from "@/views/home/components/homeIndex/list.vue";
import homeData from "@/mock/homeData.json";
import { areaList } from "@vant/area-data";
import sendFirend from "../sendFirend";
import createHai from "../createHai";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["detailData", "cart", "shops"]),
    shop() {
      return {
        ru_id: this.detailData.ru_id,
        rz_shop_name: this.detailData.rz_shop_name,
        goods: [],
        flag: false,
      };
    },
    // detailData(){
    //   return this.$store.state.detailData
    // }
  },
  data() {
    return {
      current: 0,
      homeData: homeData.data,
      idList: ["detail_0", "detail_1", "detail_2", "detail_3"],
      show: false,
      addressShow: false,
      num: 1,
      areaList: areaList,
      address: [{ name: "请选择" }, { name: "请选择" }, { name: "请选择" }],
      shareShow: false,
      firend: false,
      create: false,
      goodInfo: {
        name: " 苏泊尔（SUPOR）电饭煲家用IH加热4升L大容量2-5人智能预约球釜多功能蒸米饭电饭锅小柴火饭 ",
        price: "888.88",
      },
      loading: false,
    };
  },

  components: {
    goodList,
    sendFirend,
    createHai,
  },
  methods: {
    closeLoad() {
      this.showLoad = false;
    },
    onChange(index) {
      this.current = index;
    },
    scrollTop() {
      let ele1 = document.getElementById(this.idList[0]);
      let ele2 = document.getElementById(this.idList[1]);
      let ele3 = document.getElementById(this.idList[2]);
      let ele4 = document.getElementById(this.idList[3]);
      let arr = [ele1, ele2, ele3, ele4];
      arr.reduce((sum, value, index) => {
        if (sum) {
          return sum;
        }
        if (value.offsetHeight + value.offsetTop >= window.scrollY + 50) {
          bus.$emit("changeIndex", index);
          sum = true;
        }
        return sum;
      }, 0);
    },
    showCart() {
      this.show = true;
    },
    addressChange() {
      this.addressShow = true;
    },
    yesAddress(val) {
      console.log(val);
      this.address = val;
      this.addressShow = false;
    },
    shareShowFun() {
      this.shareShow = true;
      // this.showLoad = true
    },
    showChange(id) {
      if (id == 1) {
        this.firend = true;
      } else {
        this.create = true;
        this.showLoad = true;
      }
      this.shareShow = false;
    },
    close(id) {
      if (id == 1) {
        this.firend = false;
      } else {
        this.create = false;
        this.showLoad = false;
      }
    },
    getDetailData() {
      let id = this.$route.params.id;
      this.$store.dispatch("getDetailData", { goods_id: id });
      // console.log(this.$store.state.detailData)
    },
    // addCart() {
    //   let index = this.cart.findIndex(
    //     (value) => value.goods_id == this.detailData.goods_id
    //   );
    //   if (index >= 0) {
    //     this.$store.commit("addCartNum", { num: this.num, index });
    //   } else {
    //     this.$store.commit("addCart", { ...this.detailData, num: this.num });
    //   }
    // },
    // 添加店铺    缺少添加店铺添加商品修改num
    addShop() {
      let { goods_id, goods_name, goods_thumb, shop_price } = this.detailData;
      let index = this.shops.findIndex(
        (value) => value.ru_id == this.detailData.ru_id
      );
      // 如果店铺存在
      if (index >= 0) {
        let i = this.shops[index].goods.findIndex(
          (value) => value.goods_id == this.detailData.goods_id
        );
        // 如果商品存在
        if (i >= 0) {
          console.log("123123");
          this.$store.commit("changeNum", { index, i, num: this.num });
        } else {
          this.$store.commit("addShopGoods", {
            index,
            detailData: {
              goods_id,
              goods_name,
              goods_thumb,
              shop_price,
              flag: false,
              num: this.num,
            },
          });
        }
      } else {
        this.shop.goods.push({
          goods_id,
          goods_name,
          goods_thumb,
          shop_price,
          flag: false,
          num: this.num,
        });
        this.$store.commit("addShop", this.shop);
      }
    },
    goCart() {
      this.addShop();
      this.$router.push("/cart");
    },
  },
  mounted() {
    // if (this.detailData) {
    //   window.addEventListener("scroll", this.scrollTop);
    // }
    bus.$on("go", (id) => {
      let ele = document.getElementById(id);
      // window.scrollTo(0, ele.offsetTop);
      window.scrollTo({
        top: ele.offsetTop,
        behavior: "smooth",
      });
      // ele.scrollIntoView();
    });
    bus.$on("add", () => {
      this.num = 1;
      this.addShop();
    });
  },
  beforeDestroy() {
    this.$store.commit("clearData");
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollTop);
    localStorage.setItem("shops", JSON.stringify(this.shops));
    bus.$off("add");
  },
  created() {
    this.getDetailData();
    // console.log(this.detailData);
    // console.log(Object.keys(this.detailData).length);
    // if(){
    //   this.showLoad = true
    // }
  },
  watch: {
    detailData: {
      deep: true,
      handler() {
        window.addEventListener("scroll", this.scrollTop);
        this.loading = true;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  margin-bottom: 5.4rem;
  .goods_photo {
    background-color: #fff;
    width: 100%;
    height: 37.5rem;
    position: relative;
    img {
      width: 100%;
    }
    /deep/ .van-swipe {
      height: 37.5rem;
    }
    .custom-indicator {
      position: absolute;
      bottom: 3rem;
      right: 0;
      width: 5rem;
      height: 2.5rem;
      line-height: 2.5rem;
      border-top-left-radius: 1.25rem;
      border-bottom-left-radius: 1.25rem;
      text-align: center;
      color: #fff;
      font-size: 1.4rem;
      background-color: rgba(41, 47, 54, 0.4);
      z-index: 10;
      b {
        font-size: 1.8rem;
      }
    }
  }
  .goods_price {
    background-color: #fff;
    width: 100%;
    height: 6rem;
    padding: 1.1rem 1.1rem 0.8rem;
    box-sizing: border-box;
    // background-color: pink;
    display: flex;
    justify-content: center;
    .goods_share {
      width: 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      //   height: 4rem;
    }
    .price_info {
      flex: 1;
      //   background-color: red;
      display: flex;
      justify-content: flex-start;
      align-content: center;
      align-items: baseline;
      color: #999999;
      margin-top: 0.5rem;
      .price {
        color: #f20e28;
        font-size: 2.4rem;
        margin-right: 1rem;
      }
      .discounts {
        margin-right: 1rem;
      }
      .sales {
      }
    }
  }
  .goods_title {
    height: 6.4rem;
    box-sizing: border-box;
    background-color: #fff;
    width: 100%;
    padding: 0 1.1rem 1.1rem;
    font-size: 1.5rem;
    font-weight: 600;
  }
  .goods_module {
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.5rem 1.1rem;
    font-size: 1.4rem;
    background-color: #fff;
    .activity_content {
      //   display: flex;
      //   justify-content: flex-start;
      .activity_item {
        width: 100%;
        display: flex;
        justify-content: flex-start;

        .title {
          width: 5rem;
        }
        .activity_main {
          flex: 1;
        }
        .activity_ico {
          width: 2rem;
        }
      }
      .activity_item:not(:nth-child(1)) {
        padding-top: 1.5rem;
        margin-top: 1.5rem;
        box-sizing: border-box;
        border-bottom: 1px solid #f9f9f9;
        padding-bottom: 1.5rem;
      }
    }
    .title_box {
      height: 4rem;
      padding: 1rem 0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .title_text {
        padding-left: 1rem;
        span {
          // display: flex;
          // align-items: center;
          position: relative;
          i {
            display: inline-block;
            width: 0.3rem;
            height: 1.5rem;
            background: linear-gradient(
              180deg,
              #f91f28,
              rgba(255, 79, 46, 0.35)
            );
            margin-right: 1rem;
            position: absolute;
            top: 0.1rem;
            left: -1rem;
          }
        }
      }
    }
    .comitem {
      width: 100%;
      .item_header {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        img {
          width: 3.5rem;
          border-radius: 50%;
        }
        .right {
          width: 100%;
          .com_time {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
      .item_body {
        margin-top: 1rem;
        padding-bottom: 2rem;
        box-sizing: border-box;
        border-bottom: 1px solid #f9f9f9;
      }
    }
    .image_text {
      img {
        width: 1.4rem;
        height: 1.4rem;
        vertical-align: text-bottom;
      }
    }
  }
  .goods_recommend {
    margin-top: 2rem;
    .goods_tit {
      text-align: center;
      height: 4rem;
      line-height: 4rem;
      position: relative;
      font-size: 1.6rem;
      span {
        background-color: #f4f4f4;
        position: relative;
        z-index: 1;
      }
      i {
        display: inline-block;
        width: 15rem;
        position: absolute;
        height: 1px;
        background-color: #dddddd;
        top: 2rem;
        left: calc(50% - 7.5rem);
        z-index: 0;
      }
    }
  }
  .cart-up {
    /deep/ .van-popup {
      border-radius: 2rem 2rem 0 0;
    }
    .cart-top {
      padding: 1.5rem;
      display: flex;
      align-items: center;
      .top-left {
        width: 9.2rem;
        img {
          width: 9.2rem;
          height: 9.2rem;
        }
      }
      .top-right {
        flex: 1;
        margin-left: 2rem;
        h3 {
          font-size: 1.8rem;
          font-weight: 400;
        }
        .price {
          font-size: 1.8rem;
          color: #f92028;
        }
        .info {
          color: #888;
        }
      }
    }
    .cart-num {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem;
      span {
        display: inline-block;
        width: 3rem;
        height: 3rem;
        text-align: center;
        line-height: 3rem;
        background-color: #ccc;
        margin: 0 0.1rem;
      }
      input {
        width: 4rem;
        height: 3rem;
        text-align: center;
        background-color: #ccc;
        line-height: 3rem;
      }
    }
    .cart-btn {
      display: flex;
      height: 5.4rem;
      padding: 1.5rem;
      justify-content: space-between;
      align-items: center;
      div {
        flex: 1;
        text-align: center;
        line-height: 4rem;
        height: 4rem;
        background-color: #ffc707;
        font-size: 1.4rem;
        color: #fff;
        border-radius: 2rem;
      }
      div:nth-child(2) {
        margin-left: 1rem;
        background-color: #f91f28;
      }
    }
  }
  .share {
    height: 4rem;
    width: 100%;
    /deep/ .van-popup {
      display: flex;
      text-align: center;
      background-color: #f4f4f4;
      div {
        line-height: 4rem;
        flex: 1;
        background-color: #ffc707;
        color: #fff;
        font-size: 1.4rem;
      }
      div:nth-of-type(2) {
        background-color: red;
      }
    }
  }
  .loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    img {
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
/deep/ .van-loading {
  position: fixed;
  width: 6rem;
  height: 6rem;
  top: calc(50vh - 3rem);
  left: calc(50vw - 3rem);
  z-index: 9999;
}
</style>